import React, { useEffect, useState } from 'react'
import { getCityApi, getSearchApi } from '../api/user'
import { IndexBar, List, Grid, NavBar, SearchBar, Tabs } from 'antd-mobile'
import styles from './css/City.module.css'
import useAnLogin from '../hooks/useAnLogin'
function City() {
  let {isLogin} = useAnLogin()
  console.log(isLogin);
  let [list, setList] = useState([])
  let [hot, setHot] = useState([])
  async function getCity() {
    let res = await getCityApi()
    console.log(res);
    setList(res.data.cityList)
    setHot(res.data.hotCities)
  }
  useEffect(() => {
    getCity()
  }, [])
  let [wd, setWd] = useState()
  let [wds, setWds] = useState([])
  async function getSearch() {
    if (!wd) return
    let { data: res } = await getSearchApi(wd)
    console.log(res);
    setWds(res)

  }
  useEffect(() => {
    getSearch()
  }, [wd])
  return (
    <div>
      <NavBar>
        <SearchBar placeholder='请输入内容' onChange={(a) => setWd(a)} />
      </NavBar>
      <Tabs className={styles.tabs}>
        <Tabs.Tab title='境内.港澳台' key='fruits'>

        </Tabs.Tab>
        <Tabs.Tab title='境外' key='vegetables'>

        </Tabs.Tab>
      </Tabs>


      <Grid columns={3} gap={8}>
        {
          hot && hot.map((item, index) => {
            return <Grid.Item key={index}>
              <div className={styles['grid-demo-item-block']}>{item.name}</div>
            </Grid.Item>

          })
        }
      </Grid>

      <List header='搜索结果'>
        {
          wds && wds.map((item, index) => {

            return <List.Item key={index}>{item.name}</List.Item>
          })
        }
      </List>

      <IndexBar className={styles.index}>
        {list.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel

              index={title}
              title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item key={index}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
  )
}

export default City
